import React, { useEffect, useState } from "react";
import bem from '@/utils/bem';
import classNames from 'classnames'
import { MinusOutline, AddOutline } from 'antd-mobile-icons'
import { Image, restoreMotion, Space, } from 'antd-mobile'
import "./goodsCard.scss";
import { GoodsItemProps } from "./goodsItemProps";
import Price from "../price";
import { useNavigate } from "react-router-dom";

const defaultProps = {
    title: 'Redmi Pad SE 红米平板电脑',
    showType: 'half-line',
    imgUrl: 'https://img.youpin.mi-img.com/youpin_gms/41c5fc1b_d4ab_407d_bd51_3b1e5c887ece.png?w=800&h=800',
    href: '#',
    quantityType: 'none',
    quantity: null,
    price: 100,
    priceSize: 'normal',
    shopName: '',
    handlerClick: null
}

const GoodsCard: React.FC<GoodsItemProps> = (props) => {
    const {
        title,
        desc,
        href,
        imgUrl,
        showType,
        quantityType,
        price,
        priceSize,
        shopName,
        quantity,
        handlerClick,
        ...rest
    } = {
        ...defaultProps,
        ...props,
    }
    const navigate = useNavigate();

    const b = bem('goods-card');

    const [quantityNum, setQuantityNum] = useState(0);

    const handlerGoods = (value: string) => {
        if (handlerClick) {
            handlerClick(value);
        } else {
            navigate(value)
        }
    }

    useEffect(() => {
        if (quantity) {
            setQuantityNum(quantity)
        }
    }, [quantityNum]);

    const showTypeClass = {
        'half-line': showType === 'half-line'
    };


    const buyQuantityType = () => {
        if (!quantityType || quantityType === 'none') {
            return;
        }
        return (
            <>
                {
                    quantityType && quantityType === 'input' ? (
                        <div className={b('input')}>
                            <div className={b('input-prev')}>
                                <MinusOutline />
                            </div>
                            <div className={b('input-value')}>
                                {quantityNum}
                            </div>
                            <div className={b('input-next')}>
                                <AddOutline />
                            </div>
                        </div>
                    ) : (
                        <div className={b('input-quantity')}>
                            x {quantityNum}
                        </div>)
                }
            </>
        )
    }

    return (
        <>
            <div className={classNames(b(), showTypeClass)} onClick={() => handlerGoods(href)}>
                <div className={b('item')} >
                    <div className={b('main')}>
                        <div className={b('left')}>
                            <Image src={imgUrl} />
                        </div>
                        <div className={b('right')}>
                            <div className={classNames(b('right__title'), 'multiple-lines')}>
                                {title}
                            </div>
                            <div className={b('right__total')}>
                                <div className={b('right__total-price')}>
                                    <Price price={price} size={priceSize} />
                                </div>
                                {
                                    buyQuantityType()
                                }
                            </div>
                            {
                                shopName && (
                                    <div className={b('right__shop')}>
                                        <div className={b('right__shop-name')}><span>{shopName}</span></div>
                                    </div>
                                )
                            }

                            <div className={b('tags')}>
                                <div className={b('tags-item')}>
                                    <div className={b('tags-item__line')}>7天无理由退货</div>
                                </div>
                                <div className={b('tags-item')}>
                                    <div className={b('tags-item__line')}>库存紧张</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default GoodsCard;